import { ComponentInternalInstance, getCurrentInstance, reactive } from 'vue';
import { Modal } from '@arco-design/web-vue';

export default function importConfig(props) {
  const { user } = props;
  const base = reactive<any>({
    modalVisible: false,
    cropperVisible: false,
    options: {
      img: new URL('@/assets/touxiang.jpg', import.meta.url).href,
      autoCrop: true, // 是否默认生成截图框
      autoCropWidth: 200, // 默认生成截图框宽度
      autoCropHeight: 200, // 默认生成截图框高度
      fixedBox: true, // 固定截图框大小 不允许改变
    },
    previews: {},
    cropper: {},
  });
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;

  const init = () => {};

  const editCropper = () => {
    base.modalVisible = true;
  };

  /** 图片缩放 */
  const changeScale = (num: number) => {
    num = num || 1;
    base.cropper.changeScale(num);
  };

  /** 向左旋转 */
  const rotateLeft = () => {
    base.cropper.rotateLeft();
  };
  /** 向右旋转 */
  const rotateRight = () => {
    base.cropper.rotateRight();
  };

  /** 上传预处理 */
  const beforeUpload = (file: any) => {
    if (file.type.indexOf('image/') == -1) {
      Modal.warning({
        title: '错误提示',
        content: '文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件',
      });
    } else {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        base.options.img = reader.result;
        base.options.fileName = file.name;
      };
    }
  };
  /** 上传图片 */
  const uploadImg = async () => {
    base.cropper.getCropBlob(async (data: any) => {
      const formData = new FormData();
      formData.append('avatarfile', data, base.options.fileName);
      // const res = await uploadAvatar(formData);
      // open.value = false;
      // options.img = res.data.imgUrl;
      // userStore.avatar = options.img as string
      // proxy?.$modal.msgSuccess("修改成功");
      base.modalVisible = false;
    });
  };
  /** 实时预览 */
  const realTime = (data: any) => {
    base.previews = data;
  };

  const modalOpen = () => {
    base.cropperVisible = true;
  };

  const modalClose = () => {
    base.cropperVisible = false;
  };

  return {
    base,
    proxy,
    init,
    editCropper,
    changeScale,
    rotateLeft,
    rotateRight,
    beforeUpload,
    uploadImg,
    realTime,
    modalOpen,
    modalClose,
  };
}
